import React from "react"
import BoilingVerdict from "./BoilingVerdict"
import TemperatureInput from "./TemperatureInput"
import tryConvert from "./utils"
class Calculator extends React.Component {
    state = {
        scale: "c",
        temperature: ""
    }
    //控制摄氏度输入的方法
    handleCelsiusInputChange = (tem) => {
        // console.log(tem)
        this.setState({
            scale: "c",
            temperature: tem
        })
        // setTimeout(() => {
        //     console.log(this.state)
        // })
    }
    //控制华氏度输入的方法
    handleFahrenheitInputChange = (tem) => {
        // console.log(tem)
        this.setState({
            scale: "f",
            temperature: tem
        })
        // setTimeout(() => {
        //     console.log(this.state)
        // })
    }
    render() {
        let { temperature, scale } = this.state;
        //求摄氏度
        let celsius = scale === "c" ? temperature : tryConvert(temperature, "toCelsius")
        //求华氏度
        let fahrenheit = scale === "f" ? temperature : tryConvert(temperature, "toFahrenheit")

        // console.log('摄氏度====',celsius)
        // console.log('华氏度====',fahrenheit)

        return (
            <fieldset>
                <legend>温度转换</legend>
                {/* 摄氏度输入框 */}
                <TemperatureInput onInputChange={this.handleCelsiusInputChange} temperature={celsius} scale="c" />
                {/* 华氏度输入框 */}
                <TemperatureInput
                    onInputChange={this.handleFahrenheitInputChange}
                    temperature={
                        fahrenheit
                    } scale="f" />
                <BoilingVerdict temperature={celsius} />
            </fieldset>
        )
    }
}

export default Calculator

